<template>
  <div id="latest_music">
    <!-- 头部 -->
    <div class="title">
      <div class="left">
        <h3>最新音乐</h3>
      </div>
      <div class="right">
        更多
        <span class="iconfont icon-youjiantou"></span>
      </div>
    </div>
    <!-- 主题内容 -->
    <div class="latest_music__main">
      <ul>
        <li
          v-for="(item,index) in latestlist"
          :key="index"
          @click="playAddress(item.id)"
        >
          <div class="latest_details__left">
            <img
              :src="item.picUrl"
              :title="item.name"
            >
          </div>
          <div class="latest_music__right">
            <p class="song_name">{{item.name}}</p>
            <p class="songer">{{item.song.artists[0].name}}</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "lateat",
  data() {
    return {
      latestlist: []
    };
  },
  created() {
    axios({
      url: "https://autumnfish.cn/personalized/newsong",
      method: "get"
    }).then(res => {
      this.latestlist = res.data.result;
    });
  },
  methods: {
    playAddress(id) {
      let url = "";
      // console.log(id);
      axios({
        url: "https://autumnfish.cn/song/url",
        method: "get",
        params: {
          id // id:id
        }
      }).then(res => {
        // console.log(res);
        url = res.data.data[0].url;
        // console.log(this.$parent)
        // 直接获取父组件，可以修改任意的值
        // console.log(url)
        // this.$parent.middleUrl(url);
        axios({
          url: "https://api.imjad.cn/cloudmusic",
          method: "get",
          params: {
            type: "detail",
            id
          }
        })
          .then(res => {
            var details = {
              song: res.data.songs[0].name,
              songer: res.data.songs[0].ar[0].name,
              songSize: res.data.songs[0].l.size,
              picUrl: res.data.songs[0].al.picUrl,
              res: res
            };

            return details;
          })
          .then(msg => {
            //发送歌曲信息

            console.log({ url, msg });
          });
      });
    }
  }
};
</script>

<style lang="scss">
#latest_music {
  margin-top: 40px;
  background-color: rgba(249, 248, 246, 0.6);
  overflow: hidden;
  cursor: pointer !important;
  .title {
    height: 30px;
    // background-color: hotpink;
    line-height: 30px;
    .left {
      float: left;
      padding-left: 6%;
    }
    .right {
      float: right;
      padding-right: 6%;
      &:hover {
        color: yellowgreen;
      }
    }
  }
  .latest_music__main {
    margin-top: 40px;
    ul {
      width: 100%;
      // height: 200px;
      // background-color: red;
      padding: 0px 100px;
      overflow: hidden;
      li {
        float: left;
        width: 50%;
        margin-bottom: 30px;
        // height: 100px;
        div.latest_details__left {
          border-radius: 3px;
          display: inline-block;
          // 设置行内元素顶部基线对齐
          vertical-align: top;
          img {
            // width: 150px;
            height: 100px;
          }
        }
        div.latest_music__right {
          display: inline-block;
          height: 100px;
          width: 65%;
          padding: 10px 10px;
          p {
            display: block;
            height: 50%;
            line-height: 40px;
          }
          p.songer {
            font-weight: 400;
            color: rgba(27, 27, 27, 0.6);
          }
        }
      }
    }
  }
}
</style>